<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="header-title">
          后台管理系统
        </div>
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item><span @click="openDialog()">修改密码</span></el-dropdown-item>
            <el-dropdown-item><span @click="logout()">安全退出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{account}}</span>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1']" router>
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>操作菜单</template>
              <el-menu-item-group>
                <!-- 添加了:key绑定 -->
                <el-menu-item 
                  :index="menu.url" 
                  v-for="menu in menuList" 
                  :key="menu.id || menu.url || menu.name"
                >
                  {{menu.name}}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- <el-dialog title="修改密码" :visible.sync="dialogVisible">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input @blur="checkOldPassword()" v-model="form.oldPassword" type="password" autocomplete="new-password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input  v-model="form.newPassword" type="password" autocomplete="new-password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" autocomplete="new-password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
export default{
  data(){
    return{
      account:"",
      menuList:[],
      dialogVisible:false,
      form:{
        oldPassword:"",
        newPassword:"",
        confirmPassword:""
      },
      rules:{
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.form.newPassword) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },
    checkOldPassword(){
      // 只在旧密码有值时检查
      if (!this.form.oldPassword) {
        this.$message({
          message: '请先输入旧密码',
          type: 'warning'
        });
        return;
      }
      
      console.log(this.form.oldPassword);
      this.$http.post("adminApi/loginCtl/checkOldPassword",{oldPassword: this.form.oldPassword}).then((resp)=>{
        if(resp.data.code == 200){
          this.$message({
            message: '旧密码正确',
            type: 'success'
          });
        }else{
          this.$message({
            message: '旧密码错误',
            type: 'warning'
          });
		  this.form.oldPassword
          this.form.newPassword = '';
          this.form.confirmPassword = '';
        }
      })
    },
    submitForm(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 旧密码和新密码不能相同
          if(this.form.oldPassword == this.form.newPassword){
            this.$message({
              message: '旧密码和新密码不能相同',
              type: 'error'
            });
            return;
          }
          
          //提交新密码
          this.$http.post("adminApi/loginCtl/resetPassword",{newPassword: this.form.newPassword}).then((resp)=>{
            if(resp.data.code == 200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.dialogVisible = false;
              this.$refs.formRef.resetFields();
			  sessionStorage.clear();
			  this.$router.push("/login");
            } else {
              this.$message({
                message: resp.data.message || '修改失败',
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message({
              message: '网络错误，请稍后重试',
              type: 'error'
            });
          })
        } else {
          return false;
        }
      });
    },
    openDialog(){
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
      });
    },
    logout(){
      this.$confirm('您确定要退出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.clear();
        this.$router.replace("/login");
      })
    },
    test(){
      this.$http.get("adminApi/loginCtl/test");
    }
  },
  mounted() {
    //取出要显示的用户信息
    this.account = sessionStorage.getItem("account");
    //查询当前管理员权限
    this.$http.get("adminApi/loginCtl/menus").then((resp)=>{
      if(resp.data.code == 200){
        this.menuList = resp.data.data;
      } else {
        this.$message({
          message: '获取菜单失败',
          type: 'error'
        });
      }
    }).catch(() => {
      this.$message({
        message: '网络错误，请稍后重试',
        type: 'error'
      });
    })
  }
}
</script>

<style scoped>
.el-header {
  background-color: #00a7fa;
  color: #333;
  line-height: 60px;
}

.header-title{
  width: 300px;
  float: left;
  text-align: left;
  font-size: 20px;
  color: white;
}

.el-main{
  background-color: aliceblue;
  height: 100vh;
}
</style>